<template>
    <div class="menu_box">
        <!-- <div class="del_box" @click="isCollapse = !isCollapse">
            <el-icon v-if="isCollapse">
                <ArrowLeftBold />
            </el-icon>
            <el-icon v-else>
                <ArrowRightBold />
            </el-icon>
        </div> -->
        <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#fff" active-text-color="#000"
            text-color="#000" collapse-transition="false" @open="handleOpen" @select="handleSelect" @close="handleClose"
            unique-opened="true" :router="true" :default-active="defaultPath">
            <section v-for="(item, index) in list">
                <el-sub-menu v-if="item.children.length > 0" :index="index + 1">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        <span>{{ item.label }}</span>
                    </template>
                    <el-menu-item class="m-menu" v-for="(it, idx) in item.children" :index="it.path"
                        @click="addPathHandle(it)">{{ it.label
                        }}</el-menu-item>
                </el-sub-menu>
                <el-menu-item v-if="item.children.length == 0" :index="item.path" @click="addPathHandle(item)">
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    <template #title>
                        <span>{{ item.label }}</span>
                    </template>
                </el-menu-item>
            </section>
        </el-menu>
    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, } from "element-plus";
import { mapState, mapActions } from 'vuex';
import {
    Location,
    Document,
    Menu as IconMenu,
    Setting,
    Avatar,
    User, ChatDotRound, Monitor, Delete,
    Guide,
    Wallet, OfficeBuilding, Headset,
    Medal, Histogram, CreditCard, FolderDelete, ArrowRightBold, ArrowLeftBold,
    Sunrise, Postcard, HelpFilled, Van, School, FolderChecked, Memo, Collection, DocumentChecked,
} from "@element-plus/icons-vue";

export default {
    name: "Header",
    data() {
        return {
            isCollapse: false,
            list: [],
            flagId: 1,
            // defaultPath1: ""
        };
    },

    components: {
        Location,
        Document, ChatDotRound, Headset,
        IconMenu, Histogram, Monitor, Delete,
        Setting,
        Avatar,
        User,
        Guide,
        Wallet, ArrowRightBold, ArrowLeftBold,
        Medal, OfficeBuilding, CreditCard, FolderDelete,
        Sunrise, Postcard, HelpFilled, Van, School, FolderChecked, Memo, Collection, DocumentChecked,
    },
    computed: {
        ...mapState(['navMenuList', 'isCollapse1', 'defaultPath']), // 映射仓库中的状态到组件
        isCollapse() {
            return this.isCollapse1
        },
    },
    mounted() {
        this.getTreeData();
    },
    methods: {
        ...mapActions(['uploadAdd']),
        addPathHandle(data) {
            this.uploadAdd(data)
        },
        handleOpen(key, keyPath) { },
        handleClose(key, keyPath) { },
        handleSelect(index, indexPath) { },
        openOrClose() {
            if (this.isCollapse) {
                this.isCollapse = false;
            } else {
                this.isCollapse = true;
            }
        },
        getTreeData() {
            httpService("/javaApi/baseMenu/queryMyTree", { "systemCode": "6025" }, "get").then((data) => {
                this.list = data[0].children;
            });
        },
    },
};
</script>

<style>
.menu_box {
    position: relative;
}

.del_box {
    width: 25px;
    height: 40px;
    position: absolute;
    background-color: #adadad !important;
    z-index: 99;
    top: 50%;
    transform: translateY(-50%);
    right: -25px;
    border-radius: 0 25px 25px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.del_box .el-icon {
    margin-left: -5px;
}

.el-sub-menu {
    width: 180px;
}

.el-sub-menu:not(.el-menu--collapse) {
    width: auto !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: calc(100vh - 60px);
    padding: 10px;
    /* back dground: coral; */
}

.el-menu--collapse {
    min-height: calc(100vh - 60px);
}

.el-aside {
    transition: width 0.05s;
    -webkit-transition: width 0.05s;
    -moz-transition: width 0.05s;
    -webkit-transition: width 0.05s;
    -o-transition: width 0.05s;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100%;
}

.el-menu-item.is-active {
    /* color: #409EFF;
    background: white; */
    background-color: #007EFF;
    color: #fff;
    border-radius: 3px;
}

.m-menu.is-active {
    /* color: #409EFF;
    background: white; */
    padding-left: 40px !important;
    background-color: #007EFF;
    color: #fff;
    border-radius: 3px;
}

.el-menu--collapse .el-sub-menu__title span {
    display: none;
}

.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
    display: none;
}
</style>